<template>
	<el-dialog title="销售SKU调价" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="800px">
		<div class="form-box">
			<el-form ref="form" :model="form" :rules="rules" label-width="110px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="商品名称" prop="productName">
							<el-input v-model="item.productName" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="SKU名称" prop="skuName">
							<el-input v-model="item.skuName" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="原原价" prop="">
							<el-input :value="item.priceShow + '元'" readonly></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="调整原价" prop="priceShow">
							<el-input v-model="form.priceShow" placeholder="请填写原价" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="原销售价" prop="">
							<el-input :value="item.price + '元'" readonly></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="调整销售价" prop="price">
							<el-input v-model="form.price" placeholder="请填写销售价" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="原会员价" prop="">
							<el-input :value="item.memberPrice + '元'" readonly></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="调整会员价" prop="memberPrice">
							<el-input v-model="form.memberPrice" placeholder="请填写会员价" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="原券抵扣金额" prop="">
							<el-input :value="item.couponAmount + '元'" readonly></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="调整券金额" prop="couponAmount">
							<el-input v-model="form.couponAmount" placeholder="请填写券抵扣金额" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="原充值会员价" prop="">
							<el-input :value="item.rechargePrice + '元'" readonly></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="调整充值会员价" prop="rechargePrice">
							<el-input v-model="form.rechargePrice" placeholder="请填写券抵扣金额" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		
		<div slot="footer">
			<el-button type="primary" @click="submit">保 存</el-button>
			<el-button @click="close">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import { editProductSkuSalePrice } from '@api/product/productSkuSale'
	export default {
		props: {
			isShow: Boolean,
			item: Object,
		},
		data() {
			return {
				form: {
					id: '',
					price: '',
					priceShow: '',
					memberPrice: '',
					couponAmount: '',
					rechargePrice: '',
				},
				rules: {
					price: [{ required: true, message: '请填写需要调整的销售价', trigger: 'blur' }],
					priceShow: [{ required: true, message: '请填写需要调整的原价', trigger: 'blur' }],
					memberPrice: [{ required: true, message: '请填写需要调整的会员价', trigger: 'blur' }],
					couponAmount: [{ required: true, message: '请填写需要调整的券抵扣金额', trigger: 'blur' }],
				},
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					this.initForm();
				}
			},
		},
		methods: {
			initForm() {
				this.form.id = this.item.id;
				this.form.price = this.item.price;
				this.form.priceShow = this.item.priceShow;
				this.form.memberPrice = this.item.memberPrice;
				this.form.couponAmount = this.item.couponAmount;
				this.form.rechargePrice = this.item.rechargePrice;
			},
			
			submit() {
				this.$refs.form.validate(valid => {
					if (valid) {
						editProductSkuSalePrice(this.form)
							.then(() => {
								this.$message.success('价格修改成功！');
								this.close();
								
								this.$emit('submit');
							})
					}
				})
			},
			
			reset() {
				this.$refs.form.resetFields();
			},
			close() {
				this.$emit('close');
				this.reset();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-box {
		padding: 20px;
	}
</style>